<template>
  <view style="display: flex">
    <view class="money-contnt" style="padding-left: 20rpx; text-align: center">
      <view>
        <image style="width: 23rpx; height: 26rpx;" src="https://img.qumoyugo.com/img/WMMDLCJHDI7YX8NSH6I41688952210007.png"></image>
        <span class="money">{{ props.data.couponMoney }}</span>
      </view>
      <view class="get" @click="collectCoupon()" :style="{ display: 'inline-block', marginLeft: props.data.couponMoney >= 100 ? '16rpx' : '0rpx', boxShadow: props.data.couponType==='0'?'0rpx 0rpx 9rpx 2rpx #FFD5B7':'0rpx 0rpx 9rpx 2rpx #E9EDFF' }">立即领券</view>
    </view>
    <view class="detail">
      <view style="display: flex">
        <view class="name">{{ props.data.couponName }}</view>
        <view :style="{ color: props.data.couponType==='0'?'#EE751E':'#525FA2', fontSize: '20rpx', fontFamily: 'PingFang SC', fontWeight: 'bold' }">{{ props.data.couponType==='0'?'(活动券)':'(洗护券)' }}</view>
      </view>
      <view style="display: flex; margin-top: 22.22rpx;">
        <view class="time">有效期至：{{ props.data.effectiveEndDate }}</view>
        <view class="progress-view">
          <view class="progress-text">剩余{{ props.data.proportion }}%</view>
          <progress
                  class="progress"
                  :percent="props.data.proportion"
                  activeColor="#EE751E"
                  stroke-width="4rpx"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  }
})
const emit = defineEmits(['collectCoupon'])
const collectCoupon = () => {
  emit('collectCoupon')
}
</script>

<style scoped lang="scss">
.money-contnt {
  padding-top: 50.69rpx;
  width: 220.14rpx;

  .money {
    height: 52rpx;
    font-size: 69rpx;
    font-weight: 500;
    color: #333333;
    line-height: 48rpx;
    margin-left: 5.56rpx
  }
  .get {
    width: 125rpx;
    height: 46rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    font-size: 18rpx;
    font-weight: bold;
    color: #333333;
    line-height: 46rpx;
    text-align: center;
    margin-top: 10rpx;
  }
}
.detail {
  margin-left: 22.22rpx;
  margin-top: 58.33rpx;

  .name {
    height: 31rpx;
    font-size: 31rpx;
    font-weight: bold;
    color: #333333;
    line-height: 24rpx;
  }
  .time {
    height: 20rpx;
    font-size: 21rpx;
    font-weight: 400;
    color: #999999;
    line-height: 20rpx;
    margin-top: 11.81rpx;
  }
  .progress-view {
    width: 177.78rpx;
    margin-left: 50rpx;
    .progress-text {
      height: 17rpx;
      font-size: 18rpx;
      font-weight: 400;
      color: #333333;
      line-height: 14rpx;
    }
    .progress {
      margin-top: 7.64rpx;
    }
  }
}
</style>
